<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import { useTabBar, type IList } from "@/store/module/tabBar";

const tabBar = useTabBar();

interface Props {
  // 背景色
  bg?: string;
  // 边框色
  borderColor?: string;
  // 图片大小
  imageSize?: number | null;
  // 文字大小
  textSize?: number | null;
  // 文字默认色
  defaultColor?: string;
  // 选中文字颜色
  activeColor?: string;
  // 默认选中下标
  currentIdx?: number;
  // tab-bar数组
  list?: IList[];
}

// props
const props = defineProps<Props>();

// 未选中字体颜色
const defaultColor = ref("");

// 选中字体颜色
const activeColor = ref("");

// 背景色
const background = ref("");

// 边框色
const borderColor = ref("");

// 图片大小
const imageSize = ref(null);

// 文字大小
const textSize = ref(null);

// 当前选中的下标
const currentIdx = ref<number | null>(null);

// 移动距离
const translate = ref(0);

// tab-bar数据
const list = ref<IList[]>();

// 中间
const middle = ref(0);

const TabBarList = [
  {
    pagePath: "/pages/home/index",
    iconPath: "/static/tabbar/mine.png",
    selectedIconPath: "/static/tabbar/mineSelect.png",
    background: "#f44336",
    // text: "首页",
    idx: 0,
  },
  {
    pagePath: "/pages/shop/index",
    iconPath: "/static/tabbar/article.png",
    selectedIconPath: "/static/tabbar/articleSelect.png",
    background: "#0fc70f",
    // text: "商城",
    idx: 1,
  },
  {
    pagePath: "/pages/scan/index",
    iconPath: "/static/tabbar/community.png",
    selectedIconPath: "/static/tabbar/communitySelect.png",
    background: "#2196f3",
    // text: "扫一扫",
    idx: 2,
  },
  {
    pagePath: "/pages/wallet/index",
    iconPath: "/static/tabbar/home.png",
    selectedIconPath: "/static/tabbar/homeSelect.png",
    background: "#b145e9",
    // text: "钱包",
    idx: 3,
  },
  {
    pagePath: "/pages/mine/index",
    iconPath: "/static/tabbar/mine.png",
    selectedIconPath: "/static/tabbar/mineSelect.png",
    background: "#ffa111",
    // text: "我的",
    idx: 4,
  },
];

// 点击切换
const handelSwitchTab = (e: any) => {
  const { idx } = e.currentTarget.dataset;
  tabBar.setCurrent(idx);
  currentIdx.value = tabBar.current;
};

// 突出跟随
const follow = (idx: number) => {
  if (list.value?.length) {
    const translateX = 100 / list.value?.length;
    if (idx === middle.value) {
      translate.value = 0;
    } else if (idx > middle.value) {
      translate.value = (idx - middle.value) * translateX;
    } else if (idx < middle.value) {
      translate.value = (idx - middle.value) * translateX;
    }
  }
};

watch(
  () => tabBar.current,
  (val) => {
    currentIdx.value = val;
    void follow(val);
  },
  { deep: true, immediate: true }
);

const initializationStyle = () => {
  nextTick(() => {
    // 初始化tab-bar样式
    background.value = props.bg ?? "#f2f2f2";
    defaultColor.value = props.defaultColor ?? "#999999";
    activeColor.value = props.activeColor ?? "orange";
    borderColor.value = props.borderColor ?? "#eee";
    imageSize.value = props.imageSize ?? 40;
    textSize.value = props.textSize ?? 24;
    list.value = props.list ?? TabBarList;
    middle.value = Math.floor(list.value.length / 2);

    tabBar.setCurrent(props.currentIdx ?? middle.value); // 默认选中中间
    tabBar.setList(list.value);

    // 修改系统底部安全区颜色
    // #ifdef APP-PLUS
    var Color = plus.android.importClass("android.graphics.Color");
    plus.android.importClass("android.view.Window");
    var mainActivity = plus.android.runtimeMainActivity();
    var window_android = mainActivity.getWindow();
    window_android.setNavigationBarColor(Color.parseColor(background.value));
    // #endif
  });
};

onMounted(() => {
  void initializationStyle();
});
</script>

<template>
  <view
    class="tab-bar fixed bottom-0 h-[96rpx] w-[100vw] flex justify-around items-center rounded-[18rpx_18rpx_0_0]"
    :style="{
      background: background,
      fontSize: `${textSize}rpx`,
      border: `1rpx solid ${borderColor}`,
    }"
  >
    <template v-for="(i, idx) in list" :key="i.pagePath">
      <view
        class="tab-bar-item relative z-10 h-[80rpx] w-[80rpx] flex justify-center items-center flex-col rounded-full"
        :class="currentIdx === idx ? 'active' : ''"
        :style="{
          background: currentIdx === idx ? i.background : '',
        }"
        :data-idx="idx"
        @click="handelSwitchTab"
      >
        <view
          class="tab-bar-image w-full h-full flex justify-center items-center"
          :style="{ '--activeColor': i.background }"
        >
          <image
            class="special-image-pic"
            :style="{
              width: `${imageSize}rpx`,
              height: `${imageSize}rpx`,
            }"
            mode="aspectFit"
            :src="currentIdx === idx ? i.selectedIconPath : i.iconPath"
          ></image>
        </view>
      </view>
    </template>

    <!-- 圆弧 -->
    <view
      class="indicator"
      :style="{
        '--background': background,
        transform: `translateX(${translate}vw)`,
        background: background,
      }"
    />
  </view>
</template>

<style lang="scss" scoped>
/* 设置激活时样式 */
.tab-bar {
  .active {
    background-color: var(--activeColor);
    transform: translateY(-30rpx);
    transition: 0.15s;
    transition-delay: 0.15s;
  }

  /* 添加阴影 */
  .tab-bar-image::after {
    content: "";
    position: absolute;
    top: 12rpx;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--activeColor);
    border-radius: 50%;
    filter: blur(5rpx);
    z-index: -1;
    opacity: 0;
    transition: 0.5s;
    transition-delay: 0s;
  }

  .active .tab-bar-image::after {
    opacity: 0.5;
    transition-delay: 0.15s;
  }

  /* 圆弧 */
  .indicator {
    position: absolute;
    top: -42rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    z-index: 1;
    transition: 0.5s;
  }

  .indicator::before {
    content: "";
    position: absolute;
    top: 4rpx;
    left: -34rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 15rpx 24rpx var(--background);
  }

  .indicator::after {
    content: "";
    position: absolute;
    top: 4rpx;
    right: -34rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: -15rpx 24rpx var(--background);
  }
}
</style>
